<template>
  <div class="paly">
    <div
      class="m-playbar m-playbar-unlock"
      style="top: -7px; visibility: visible"
    >
      <div class="updn">
        <div class="right f-fl"></div>
      </div>
      <div class="bg"></div>
      <div class="hand" title="展开播放条"></div>
      <div class="wrap" id="g_player" style="margin-left: -498.5px">
        <div class="btns">
          <a href="javascript:;" class="prv" title="上一首(ctrl+←)">上一首</a>
          <a
            href="javascript:;"
            class="ply j-flag pas"
            title="播放/暂停(p)"
           
            >播放/暂停</a
          >
          <a href="javascript:;" class="nxt" title="下一首(ctrl+→)">下一首</a>
        </div>
        <div class="head j-flag">
          <img
            src="https://p2.music.126.net/CT-C64y0Jk1HId2GHt49Fw==/109951167937418529.jpg?param=34y34"
          /><a href="#" hidefocus="true" class="mask"></a>
        </div>
        <div class="play">
          <div class="j-flag words">
            <a
              hidefocus="true"
              href="#"
              class="f-thide name fc1 f-fl"
              title="雁书"
              >雁书</a
            ><span class="by f-thide f-fl"
              ><span title="艾热 AIR"
                ><a class="" href="#">艾热&nbsp;AIR</a></span
              ></span
            ><a href="#" class="src" title="来自榜单"></a>
          </div>
          <div class="m-pbar">
            <div class="barbg j-flag">
              <div class="rdy" style="width: 70.2942%"></div>
              <div class="cur" style="width: 66.5917%">
                <span class="btn f-tdn f-alpha"><i></i></span>
              </div>
            </div>
            <span class="j-flag time"><em>02:50</em> / 04:16</span>
          </div>
        </div>
        <div class="oper f-fl">
          <a href="javascript:;" class="icn icn-pip" title="画中画歌词"
            >画中画歌词</a
          >
          <a href="javascript:;" class="icn icn-add j-flag" title="收藏"
            >收藏</a
          >
          <a href="javascript:;" class="icn icn-share" title="分享">分享</a>
        </div>
        <div class="ctrl f-fl f-pr j-flag">
          <div class="m-vol" style="visibility: hidden">
            <div class="barbg"></div>
            <div class="vbg j-t">
              <div class="curr j-t" style="height: 12.6296px"></div>
              <span class="btn f-alpha j-t" style="top: 70px"></span>
            </div>
          </div>
          <a href="javascript:;" class="icn icn-vol"></a>
          <a href="javascript:;" class="icn icn-loop" title="循环"></a>
          <span class="add f-pr">
            <span class="tip" style="display: none">已开始播放</span>
            <a href="javascript:;" title="播放列表" class="icn icn-list s-fc3"
              >170</a
            >
          </span>
          <div class="tip tip-1" style="display: none">循环</div>
        </div>
      </div>
    </div>
    <audio :src="this.yinyueUrl" controls autoplay></audio>
  </div>
</template>

<script>

export default {
  data() {
    return {
     
    };
  },
 
};
</script>
 
<style lang = "less" scoped>
.paly {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 100%;
  z-index: 1002;
  .m-playbar {
    position: absolute;
    /* top: -53px; */
    left: 0;
    width: 100%;
    height: 53px;
    margin: 0 auto;
    .updn {
      position: relative;
      z-index: 11;
      .right {
        position: absolute;
        top: -1px;
        right: 0;
        width: 15px;
        height: 54px;
        background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
          no-repeat 0 9999px;
        background-position: -52px -393px;
        pointer-events: none;
      }
    }
    .bg {
      height: 53px;
      zoom: 1;
      margin-right: 67px;
      background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
        no-repeat 0 9999px;
      background-position: 0 0;
      background-repeat: repeat-x;
    }
    .hand {
      position: absolute;
      top: -10px;
      width: 100%;
      height: 20px;
      cursor: pointer;
    }
    .wrap {
      position: absolute;
      left: 50%;
      top: 6px;
      z-index: 15;
      width: 980px;
      height: 47px;
      margin: 0 auto;
      /* margin-left: -490px; */
      .btns {
        width: 137px;
        padding: 6px 0 0 0;
        float: left;
        a {
          display: block;
          float: left;
          width: 28px;
          height: 28px;
          margin-right: 8px;
          margin-top: 5px;
          text-indent: -9999px;
          background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
            no-repeat 0 9999px;
        }
        .prv {
          background-position: 0 -130px;
        }
        .ply {
          width: 36px;
          height: 36px;
          margin-top: 0;
          background-position: 0 -204px;
        }
        .nxt {
          background-position: -80px -130px;
        }
      }
      .head {
        position: relative;
        margin: 6px 15px 0 0;
        width: 34px;
        height: 34px;
        float: left;
        img {
          width: 34px;
          height: 34px;
          border: 0;
        }
        .mask {
          position: absolute;
          top: 0px;
          left: 0px;
          display: block;
          width: 34px;
          height: 35px;
          background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
            no-repeat 0 9999px;
          background-position: 0 -80px;
        }
      }
      .play {
        position: relative;
        width: 608px;
        float: left;
        .words {
          height: 28px;
          overflow: hidden;
          color: #e8e8e8;
          text-shadow: 0 1px 0 #171717;
          line-height: 28px;
        }
        .barbg,
        .cur,
        .rdy,
        .left {
          background: url(../../style/web2/img/frame/statbar.png?2307811…)
            no-repeat 0 9999px;
        }
        .m-pbar {
          width: 493px;

          .barbg,
          .cur,
          .rdy {
            height: 9px;
            background-position: right 0;
          }
        }
      }
    }
    #g_player .play {
      width: 581px;
      .m-pbar,
      .m-pbar .barbg {
        width: 466px;
      }
    }
  }
  .f-fl {
    float: left;
  }
}
</style>